﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div id="maintainRecordListTable" class="main-content">
    <h3 class="page-title">保养记录列表Maintenance record list</h3>
    
    <div class="panel panel-default">
        <div class="panel-heading">
            <p class="panel-title">条件查询Condition query</p>
            <div class="right">
                <button type="button" class="btn-toggle-collapse"><i class="fa fa-angle-up"></i></button>
            </div>
        </div>
        <div class="panel-body container-fluid">
            <div class="row">
                <div class="col-sm-4">
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">保养单模板Maintenance order template</span>
                        <select class="form-control" v-model="searchModel.queryFormID">
                            <option v-for="(form, idx) in templateFormList" v-bind:value="form.ID">{{form.Name}}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-right">
                    <br />
                    <button class="btn btn-default btn-sm" v-on:click="SearchReset">
                        <i class="fa fa-eraser"></i> 清空empty
                    </button>
                    <button class="btn btn-default btn-sm" v-on:click="SearchRecord">
                        <i class="fa fa-search"></i> 查询query
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- TABLE  -->
    <div class="panel">
        <div class="panel-body">
            <button class="btn btn-primary" v-on:click="AddRecord">
                <i class="fa fa-plus"></i> 新增保养记录Add maintenance record
            </button>
            <br />
            <br />
            <table class="table table-striped" v-if="isNotEmptyObject(pageModel.results)">
                <thead>
                    <tr>
                        <td colspan="8">
                            <div class="form-inline text-right">
                                <label class="control-label">每页记录数Records per page：</label>
                                <select class="form-control input-sm" style="width:auto;" v-model="pageModel.pageSize">
                                    <option value="10">10条Article 10</option>
                                    <option value="30">30条Article 30</option>
                                    <option value="50">50条Article 50</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>ID</th>
                        <th>设备编号equipment number</th>
                        <th>设备名称equipment name</th>
                        <th>保养单模板Maintenance order template</th>
                        <th>保养时间maintenance time</th>
                        <th>保养员maintainer</th>
                        <th>签核状态sign off status</th>
                        <th>操作operation</th>
                    </tr>
                </thead>
                <tbody v-for="(record, index) in pageModel.results">
                    <tr>
                        <td><span v-if="record.BaseInfo">{{record.BaseInfo.ID}}</span></td>
                        <td><span v-if="record.Equipment">{{record.Equipment.BaseInfo.Code}}</span></td>
                        <td><span v-if="record.Equipment">{{record.Equipment.BaseInfo.Name}}</span></td>
                        <td><span v-if="record.TemplateForm">{{record.TemplateForm.BaseInfo.Name}}</span></td>
                        <td><span v-if="record.BaseInfo">{{record.BaseInfo.RecordDate | FormatCSharpDate}}</span></td>
                        <td><span v-if="record.CheckerInfo">{{record.CheckerInfo.Name}}</span></td>
                        <td>
                            <span v-for="(value, key, idx) in approvalStatusDictionary">
                                <span v-if="value == record.BaseInfo.Status">{{key}}</span>
                            </span>
                        </td>
                        <td>
                            <span v-if="!isNotEmptyObject(record.Approvals)">
                                <button type="button" class="btn btn-info btn-sm" v-on:click="EditRecord(record.BaseInfo.ID)">
                                    <i class="fa fa-edit"></i> 编辑edit
                                </button>
                                <button type="button" class="btn btn-danger btn-sm" v-on:click="DeleteRecord(record)">
                                    <i class="fa fa-trash"></i> 删除delete
                                </button>
                            </span>
                        </td>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td colspan="8">
                            <nav class="text-right" aria-label="Page navigation">
                                <ul class="pagination">
                                    <li v-if="pageModel.pageIdx > 1">
                                        <a href="#" aria-label="Previous" v-on:click="GotoPage(pageModel.pageIdx - 1)">
                                            <span aria-hidden="true">
                                                <i class="fa fa-angle-left"></i> 上一页previous page
                                            </span>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx != 1">
                                        <a href="#" v-on:click="GotoPage(1)">
                                            <i class="fa fa-step-backward"></i>
                                        </a>
                                    </li>
                                    <template v-for="idx in pageModel.pageLength">
                                        <li v-if="pageModel.pageIdx - idx > -5 && pageModel.pageIdx - idx < 5 " v-bind:class="pageModel.pageIdx == idx ? 'active' : ''">
                                            <a href="#" v-on:click="GotoPage(idx)">{{idx}}</a>
                                        </li>
                                    </template>
                                    <li v-if="pageModel.pageIdx != pageModel.pageLength">
                                        <a href="#" v-on:click="GotoPage(pageModel.pageLength)">
                                            <i class="fa fa-step-forward"></i>
                                        </a>
                                    </li>
                                    <li v-if="pageModel.pageIdx < pageModel.pageLength">
                                        <a href="#" aria-label="Next" v-on:click="GotoPage(pageModel.pageIdx + 1)">
                                            <span aria-hidden="true">
                                                下一页next page <i class="fa fa-angle-right"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- END TABLE -->

</div>


@section scripts{
    <script type="text/javascript" src="~/Scripts/pageJs/Maintain/Record.js?v=@DateTime.Now.ToFileTimeUtc()"></script>
}
